<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="include :: header('地图选点')" />
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
</head>
<body class="gray-bg">
  <div class="wrapper wrapper-content">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-sm-3 control-label">坐标点搜索：</label>
          <div class="col-sm-6">
            <input type="text" name="search" id="tipinput"  placeholder="请输入文本" >
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-sm-3 control-label">景区坐标：</label>
          <div class="col-sm-6">
            <input type="text"  id="coordinate" name="coordinate" class="form-control" th:field="*{coordinate}" readonly>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="ibox float-e-margins">

          <div class="ibox-content no-padding">
            <div id="container"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '0bb70a45b3cd06cd8fdd1a2b38fedb12',
    }
  </script>
<th:block th:include="include :: footer" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=8e1a8c1be1e7af1e7a83511c63700832&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

<script type="text/javascript">
  //地图加载
  var coordinate = "[[*{coordinate}]]";
  console.log(coordinate);
  if(coordinate ==""){
    coordinate=[116.397428, 39.90923];
  }else{
    coordinate=coordinate.split(",");
  }
  var map = new AMap.Map("container", {
    resizeEnable: false,
    center: coordinate,
    zoom: 13
  });
  //输入提示
  var autoOptions = {
    input: "tipinput"
  };



  AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
      map: map
    }); //构造地点查询类
    auto.on("select", select); //注册监听，当选中某条记录时会触发

    function select(e) {
      console.log(e.poi.location);
      //console.log(e.poi.localhost.lng+","+e.poi.localhost.lat);
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name); //关键字查询查询
    }
  });

  //为地图注册click事件获取鼠标点击出的经纬度坐标
  map.on('click', function(e) {
    $("#coordinate").val(e.lnglat.getLng() + ',' + e.lnglat.getLat());
  });

  function copyText() {
    var input = document.getElementById("txtCoordinate");
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令

    //文字展示
    document.getElementById("coordinate").style.display="";

    setTimeout(function(){
      document.getElementById("coordinate").style.display="none";
    },1000);

  }
</script>
  <style>
    #container {
      width: 100%;
      height: 450px;
    }
  </style>

</body>
</html>
